<template>
  <div class="matlab-bar clearfix">
    <div class="block file">
      <div class="top dis-flex">
        <div
          class="column pos-rel"
          :class="{ active: activeBtn === 'editorBuild' }"
        >
          <div id="editorBuildF" @click="build">
            <div class="matlab-icon icon-new icon-style" />
            <div>新建</div>
            <i class="el-icon-caret-bottom" />
          </div>
          <menu-list
            ref="editorBuild"
            class="menu-position"
            :menu-list="
              $store.state.matlab.breadcrumb.length > 0
                ? menuList
                : menuRootList
            "
            :callback="menuClick"
          />
        </div>
        <div
          class="column pos-rel"
          :class="{ active: activeBtn === 'editorOpen' }"
        >
          <div id="editorOpenF" @click="open">
            <div class="matlab-icon icon-open-file icon-style" />
            <div>打开</div>
            <i class="el-icon-caret-bottom" />
          </div>
          <open-menu ref="editorOpen" class="menu-position" />
        </div>
        <div class="column" @click="save">
          <div class="matlab-icon icon-save-file icon-style" />
          <div>保存</div>
          <i class="el-icon-caret-bottom" />
        </div>
      </div>
      <div class="desc">文件</div>
      <div class="right-line" />
    </div>
    <!--
    <div class="block navigation">
      <div class="top dis-flex">
        <div class="column" @click="todo">
          <div class="icon-goto icon-style"></div>
          <div>转至</div>
          <i class="el-icon-caret-bottom"></i>
        </div>
        <div class="pt-10">
          <div class="row clearfix" @click="todo">
            <div class="fl matlab-icon4 icon-search icon-style-small"></div>
            <span class="fl">&nbsp;查找&nbsp;</span>
            <i class="fl el-icon-caret-bottom"></i>
          </div>
          <div class="row clearfix" @click="todo">
            <div class="fl icon-set-clear icon-style-small"></div>
            <span class="fl">&nbsp;书签&nbsp;</span>
            <i class="fl el-icon-caret-bottom"></i>
          </div>
        </div>
      </div>
      <div class="desc">导航</div>
      <div class="right-line"></div>
    </div>
    <div class="block code">
      <div class="top dis-flex">
        <div class="column" @click="todo">
          <div class="icon-convert-function icon-style"></div>
          <div>重构</div>
          <i class="el-icon-caret-bottom"></i>
        </div>
        <div class="pt-10">
          <div class="row clearfix">
            <div
                class="fl mr-5 matlab-icon4 icon-percent icon-style-small"
                @click="todo"
            ></div>
            <div
                class="fl mr-5 matlab-icon4 icon-percent-close icon-style-small"
                @click="todo"
            ></div>
            <div
                class="fl icon-wrap-comment icon-style-small"
                @click="todo"
            ></div>
          </div>
          <div class="row clearfix">
            <div
                class="fl mr-5 matlab-icon4 icon-indentation icon-style-small"
                @click="todo"
            ></div>
            <div
                class="fl mr-5 matlab-icon4 icon-add-indentation icon-style-small"
                @click="todo"
            ></div>
            <div
                class="fl matlab-icon4 icon-cut-indentation icon-style-small"
                @click="todo"
            ></div>
          </div>
        </div>
      </div>
      <div class="desc">代码</div>
      <div class="right-line"></div>
    </div>
    <div class="block resources">
      <div class="top dis-flex">
        <div class="column" @click="todo">
          <div class="icon-run-section icon-style"></div>
          <div>运行节</div>
          <i class="el-icon-caret-bottom"></i>
        </div>
        <div>
          <div class="row clearfix" @click="todo">
            <div class="fl icon-insert-section icon-style-small"></div>
            <span class="fl">&nbsp;分节符</span>
          </div>
          <div class="row clearfix" @click="todo">
            <div class="fl icon-run-cell icon-style-small"></div>
            <span class="fl">&nbsp;运行并前进</span>
          </div>
          <div class="row clearfix" @click="todo">
            <div class="fl icon-run-cell icon-style-small"></div>
            <span class="fl">&nbsp;运行到结束</span>
          </div>
        </div>
      </div>
      <div class="desc">节</div>
      <div class="right-line"></div>
    </div>
    -->
    <div class="block file">
      <div class="top dis-flex">
        <div class="column" @click="run">
          <div class="matlab-icon icon-run icon-style" />
          <div>运行</div>
          <i class="el-icon-caret-bottom" />
        </div>
        <!--
        <div class="column" @click="todo">
          <div class="icon-step icon-style"></div>
          <div>步进</div>
          <i class="el-icon-caret-bottom"></i>
        </div>
        <div class="column" @click="todo">
          <div class="icon-quit icon-style"></div>
          <div>停止</div>
        </div>
        -->
      </div>
      <div class="desc">运行</div>
      <div class="right-line" />
    </div>
  </div>
</template>

<script>
import OpenMenu from '../dropdown-menu/OpenMenu.vue';
import MenuList from '../dropdown-menu/MenuList.vue';
export default {
  components: {
    MenuList,
    OpenMenu
  },
  data() {
    return {
      activeBtn: '',
      menuList: [
        {
          style: 'item',
          type: 'buildFile',
          icon: 'icon-build-script',
          title: '脚本'
        },
        // {
        // style: 'item',
        // type: 'buildFunction',
        // icon: 'icon-build-function',
        // title: '函数'
        // },
        // {
        // style: 'item',
        // type: 'buildClass',
        // icon: 'icon-build-class',
        // title: '类'
        // },
        // { style: 'divider' },
        // {
        // style: 'item',
        // type: 'buildExample',
        // icon: 'icon-build-example',
        // title: '图窗'
        // },
        { style: 'divider' },
        {
          style: 'item',
          type: 'buildFolder',
          icon: 'icon-build-fold',
          title: '文件夹'
        }
      ],
      menuRootList: [
        {
          style: 'item',
          type: 'buildRootFolder',
          icon: 'icon-build-fold',
          title: '工程'
        }
      ]
    };
  },
  methods: {
    // 新建按钮
    build() {
      setTimeout(() => {
        this.activeBtn = 'editorBuild';
        this.$refs.editorBuild.show();
        document.body.addEventListener('click', this.menuClose);
      }, 200);
    },
    // 打开按钮
    open() {
      setTimeout(() => {
        this.activeBtn = 'editorOpen';
        this.$refs.editorOpen.show();
        document.body.addEventListener('click', this.menuClose);
      }, 200);
    },
    // 点击其他位置关闭菜单
    menuClose(e) {
      var sp = document.getElementById(this.activeBtn + 'F');
      if (sp) {
        if (!sp.contains(e.target)) {
          this.$refs[this.activeBtn].hide();
          this.activeBtn = '';
          document.body.removeEventListener('click', this.menuClose);
        }
      }
    },
    // 菜单事件
    menuClick(type) {
      // console.log(type);
      switch (type) {
        case 'buildRootFolder':
        case 'buildFolder':
        case 'buildFile':
          this.$store.commit('matlab/append', { nodeType: 'father', type });
          break;
        default:
          this.$message.info('二期开发');
          break;
      }
    },
    save() {
      const store = this.$store.state.matlab;
      if (store.editorFiles.length) {
        if (store.isUploadFile) {
          this.$message.error('文件正在部署中...');
          return;
        }
        const file = store.editorFiles.find(item => (item.id === store.editorFilesId));
        if (file && file.editText !== file.editContent) {
          this.$store.dispatch('matlab/buildFiles', {
            type: 'update',
            id: file.id,
            text: file.editContent,
            path: file.path
          }).then((result) => {
            this.$message.success('保存成功');
          }).catch((err) => {
            this.$message.error('保存失败');
            console.error(err);
          });
        }
      }
    },
    async run() {
      const store = this.$store.state.matlab;
      if (store.editorFiles.length) {
        const file = store.editorFiles.find(
          (item) => item.id === store.editorFilesId
        );
        if (file && file.display === 'file' && file.editText !== file.editContent) {
          if (store.isUploadFile) {
            this.$message.error('文件正在部署中...');
            return;
          }
          try {
            await this.$store.dispatch('matlab/buildFiles', {
              type: 'update',
              id: file.id,
              text: file.editContent,
              path: file.path
            });
          } catch (err) {
            console.error(err);
          }
        }
        if (!store.loadingResult) {
          const m = this.$message({
            message: '正在运行中...',
            offset: 40,
            duration: 0
          });
          this.$store.dispatch('matlab/run', file).then(() => {
            this.$message({
              message: '代码文件运行完成',
              type: 'success',
              offset: 40
            });
          }).catch((err) => {
            this.$message({
              message: '代码文件运行失败',
              type: 'error',
              offset: 40
            });
            console.error(err);
          }).finally(() => {
            m.close();
          });
        }
      }
    },
    todo() {
      this.$message.info('二期开发');
    }
  }
};
</script>

<style lang="scss" scoped>
.menu-position {
  position: absolute;
  top: 69px;
  left: 0;
}
</style>
